<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/eui.css">
    <script src="js/vue/vue.js"></script>
    <script src="js/vue/axios.min.js"></script>
    <script src="js/vue/eui.js"></script>

    <style>
        #app {
            width: 600px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-page-header @back="goBack" content="发布微头条">

        </el-page-header>
        <el-form>
            <el-form-item>
                <el-input type="textarea" v-model="micro.content" placeholder="有什么新鲜事告诉大家?" rows="20"></el-input>
            </el-form-item>
            <el-form-item>
                <!-- 上传图片的组件，也就是页面上的那个大大的加号 -->
                <el-upload
                        action="/wemedia/ddSubMicro/upload"
                        name="picFile"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :on-success="handleSuccess"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <!-- 图片显示的组件，也就是在加号后面显示图片的位置 -->
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">发布</el-button>
            </el-form-item>
        </el-form>
    </div>

    <script>
        let v = new Vue({
            el: "#app",
            data() {
                return {
                    micro: {
                        content: "",
                        imageArrStr: "",
                        hasImage: ""
                    },
                    dialogImageUrl: '',
                    dialogVisible: false
                }
            },
            methods: {
                // 发布的方法
                onSubmit() {
                    // 判断一下是否有图片
                    if (v.micro.imageArrStr == '') {
                        v.micro.hasImage = 0
                    } else {
                        v.micro.hasImage = 1;
                    }
                    // 向后端发起请求，把内容数据和图片数据给到后端处理
                    axios.post("/wemedia/ddMicro/releaseNewDynamic", v.micro).then(function (res) {
                        // 如果服务器端返回1则代表成功，跳转回首页
                        if (res.data.state == 200) {
                            location.href="/";
                        } else { // 返回0的话就说明失败了
                            this.$message.error(res.data.message);
                        }
                    })
                },
                // 删除图片时调用的方法
                handleRemove(file, fileList) {
                    // 向后端发起请求，并且把图片的路径传给服务端进行删除处理
                    axios.get("/wemedia/ddSubMicro/deleteImage" + file.response).then(function (res) {
                    })
                    // 调用遍历图片数组的方法，更新micro.imageArrStr的数据，每次删除完一张图片过后都得调用这个方法来把micro.imageArrStr进行更新
                    this.getImageArrStr(fileList);
                },
                handlePictureCardPreview(file) {
                    this.dialogImageUrl = file.url;
                    this.dialogVisible = true;
                },
                goBack() {
                    console.log('go back');
                },
                // 上传图片成功时调用的方法
                handleSuccess(response, file, fileList) {
                    // 调用遍历图片数组的方法来对micro.imageArrStr进行更新
                    this.getImageArrStr(fileList);
                    //console.log(v.micro.imageArrStr);
                },
                /*
                    遍历图片数组，然后把每一个图片的名字存进一个新的数组imageArr，
                    再把这个新的数组通过toString()方法转换成字符串赋值给v.micro.imageArrStr
                 */
                getImageArrStr(fileList) {
                    let imageArr = [];
                    for (let file of fileList) {
                        imageArr.push(file.response);
                    }
                    v.micro.imageArrStr = imageArr.toString();
                }
            }
        });
    </script>
</body>
</html>